<style>
    .goods-info-panel {
        text-align: center;
    }

    .goods-info-panel ul {
        list-style: none;
        text-align: center;
    }

    .goods-info-panel ul li {
        display: inline;
        margin: 0 30px 0 0;
        padding: 0 30px 0 0;
        font-size: 42px;
        border-right:1px solid #e8e8e8;
    }
</style>
<div id="mainContent" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="overflow: hidden;height: 108px;">

    </div>
    <div data-options="region:'center'">
        <table id="userInfoDg" title="" class="easyui-datagrid"
               data-options="
                url: '${base}/admin/users/dataList.do',
                fit:true,
                lines: true,
                rownumbers: false,
                striped: true,
                animate:true,
                singleSelect : true,
                showFooter: true,
                pagination: true,
                idField: 'userId',
                onLoadSuccess: loadSuccess
            " border="0">
            <thead data-options="frozen:true">
            <tr>
                <th data-options="field:'headImg',formatter:formatterImg" width="5%">微信头像</th>
                <th data-options="field:'openId'" width="5%">微信ID</th>
                <th data-options="field:'companyName'" width="8%">公司</th>
                <th data-options="field:'nickName'" width="8%">昵称</th>
                <th data-options="field:'realName'" width="8%">真实姓名</th>
                <th data-options="field:'sex',formatter:formatterSex" width="3%">性别</th>
                <th data-options="field:'birthday'" width="8%">生日</th>
                <th data-options="field:'province'" width="3%">省份</th>
                <th data-options="field:'city'" width="3%">城市</th>
                <th data-options="field:'area'" width="3%">区域</th>
                <th data-options="field:'address'" width="8%">详细地址</th>
                <th data-options="field:'followTime'" width="8%">关注时间</th>
                <th data-options="field:'userId',formatter:formatterControl" width="8%">更多</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div id="userInfoDialog" style="pading: 8px;">
    <table class="table table-striped" width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 12px;">
        <tr style="height:23px; line-height:23px;">
            <td width="30%">头像</td>
            <td width="70%"><img id="headImg" width="64" height="64" style="border-radius: 50%;border: 0;"/></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">微信ID</td>
            <td width="70%"><span id="openId"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">公司</td>
            <td width="70%"><span id="company"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">昵称</td>
            <td width="70%"><span id="nickNameTxt"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">姓名</td>
            <td width="70%"><span id="realName"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">性别</td>
            <td width="70%"><span id="sex"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">生日</td>
            <td width="70%"><span id="birthday"></span></td>
        </tr>
       <!-- <tr style="height:23px; line-height:23px;">
            <td width="30%">年龄</td>
            <td width="70%"><span id="age"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">身高</td>
            <td width="70%"><span id="height"></span></td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">体重</td>
            <td width="70%"><span id="weight"></span></td>
        </tr>-->
        <tr style="height:23px; line-height:23px;">
            <td width="30%">家乡</td>
            <td width="70%">
                <span id="country"></span>-><span id="province"></span>-><span id="city"></span>-><span id="area"></span>
                <div id="address"></div>
            </td>
        </tr>
        <tr style="height:23px; line-height:23px;">
            <td width="30%">关注时间</td>
            <td width="70%"><span id="follow_time"></span></td>
        </tr>
    </table>
</div>

<script>

    $(function(){

        $('#userInfoDialog').dialog({
            title: '用户信息',
            iconCls: 'icon-man',
            width: 500,
            height: 640,
            closed: true,
            modal: true,
            style: {padding: 10},
            buttons: [{
                text: '关闭',
                iconCls: 'icon-cancel',
                onClick: function(){
                    $('#userInfoDialog').dialog('close');
                }
            }]
        });

    });

    function formatterImg(val,row) {
        var img = '<img src="'+val+'" width="32" height="32" style="border-radius: 50%;border:0;"/>';

        return img;
    }

    function formatterSex(val,row) {
        switch (parseInt(val)) {
            case 1:
                return '男';
            case 2:
                return '女';
            default:
                return '未知';
        }
    }

    function formatterControl(val,row) {
        var detail = '<a class="lookBtn" href="#">查看</a>';

        return detail;
    }
    
    function loadSuccess(data) {

        var dc = $('#mainContent').find('.lookBtn');
        if (dc.length < 1) {
            return;
        }

        $(dc).each(function (r, d) {
            var user = data.rows[r];
            $(this).linkbutton({
                plain: true,
                iconCls: 'icon-search',
                onClick: function () {
                    console.info(user);
                    $('#openId').text(user.openId);
                    $('#company').text(user.companyName);
                    $('#headImg').attr('src', user.headImg);
                    $('#nickNameTxt').text(user.nickName);
                    $('#realName').text(user.realName);
                    $('#birthday').text(user.birthday);
                    switch (parseInt(user.sex)) {
                        case 1:
                            $('#sex').text('男');
                            break;
                        case 2:
                            $('#sex').text('女');
                            break;
                        default:
                            $('#sex').text('未知');
                            break;
                    }
                    $('#country').text(user.country);
                    $('#province').text(user.province);
                    $('#city').text(user.city);
                    $('#area').text(user.area);
                    $('#address').text(user.address);
                    $('#follow_time').text(user.followTime);
                    $('#userInfoDialog').dialog('open');
                }
            });
        });
    }

</script>